<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>板块数据统计分析</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body class="min-h-screen p-4 md:p-8">
    <div class="glassmorphism p-6 max-w-7xl mx-auto">
        <h1 class="text-2xl md:text-3xl font-bold mb-6 text-center text-indigo-700">板块数据统计分析<span id="selected-date"></span></h1>
        <div class="text-center mb-8"><a href="stock_chart.html" class="text-blue-500 hover:underline">查看股票板块涨幅折线图</a></div>
        
        <div class="main-container flex flex-col md:flex-row gap-6">
            <!-- 左侧日期导航栏 -->
            <div class="date-nav w-full md:w-64">
                <div class="glassmorphism p-4 h-full">
                    <h2 class="text-lg font-semibold mb-4 text-gray-700">日期选择</h2>
                    <div id="date-list" class="space-y-2"></div>
                    <script src="script.js"></script>
                </div>
            </div>
            
            <!-- 右侧内容区域 -->
            <div class="content-area flex-1 grid grid-cols-1 gap-6">
                <!-- 区域1: 长期低迷及轮动排除剔除 -->
                <div class="glassmorphism p-4">
                    <h3 class="section-title text-lg font-semibold mb-3">长期低迷及轮动排除剔除</h3>
                    <div class="mb-6">
                        <h4 class="text-sm font-medium text-gray-600 mb-2">淘汰板块1</h4>
                        <div class="overflow-x-auto">
                            <table id="eliminated-plates-1" class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">序号</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">板块名称</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">涨幅</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200"></tbody>
                            </table>
                        </div>
                        <div class="mt-6">
                            <h4 class="text-sm font-medium text-gray-600 mb-2">保留板块1</h4>
                            <div class="overflow-x-auto">
                                <table id="reserved-plates-1" class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">序号</th>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">板块名称</th>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">涨幅</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200"></tbody>
                                </table>
                            </div>
                        </div>
                <!-- 区域2: 昨日TOP20板块差异化处理 -->
                <div class="glassmorphism p-4">
                    <h3 class="section-title text-lg font-semibold mb-3">昨日TOP20板块差异化处理</h3>
                    
                    <div class="overflow-x-auto">
                        <h4 class="text-sm font-medium text-gray-600 mb-2">淘汰板块2</h4>
                        <table id="eliminated-plates-2" class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">序号</th>
                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">板块名称</th>
                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">涨幅</th>
                                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">主力净流入</th>                                
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                            </tbody>
                        </table>
                    </div>
                        <div class="mt-6">
                            <h4 class="text-sm font-medium text-gray-600 mb-2">保留板块2</h4>
                            <div class="overflow-x-auto">
                                <table id="reserved-plates-2" class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">序号</th>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">板块名称</th>
                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">涨幅</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200"></tbody>
                                </table>
                            </div>
                        </div>
                </div>
                
                <!-- 区域3: 推荐 -->
                <div class="glassmorphism p-4">
                    <h3 class="section-title text-lg font-semibold mb-3">推荐板块</h3>
                    <div class="mb-6">
                        <h4 class="text-sm font-medium text-gray-600 mb-2">推荐候选池</h4>
                        <div class="overflow-x-auto">
                            <table id="all-non-eliminated-plates" class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">序号</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">板块名称</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">综合得分</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">资金得分</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">事件得分</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">市盈率</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">估值得分</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">命中淘汰对冲板块</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200"></tbody>
                            </table>
                        </div>
                    </div>
                    <div>
                        <h4 class="text-sm font-medium text-gray-600 mb-2">Top25推荐板块</h4>
                        <div class="overflow-x-auto">
                            <table id="top-recommended-plates" class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">序号</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">板块名称</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">今日涨幅</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">综合得分</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">资金得分</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">事件得分</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">市盈率</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">估值得分</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">命中淘汰对冲板块</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- 区域4: 昨日命中情况 -->
                <div class="glassmorphism p-4">
                    <h3 class="section-title text-lg font-semibold mb-3">昨日命中情况 (<span id="prev-trading-date"></span>-<span id="hit-rate"></span>)</h3>
                    <div class="mb-6">
                        <h4 class="text-sm font-medium text-gray-600 mb-2">昨日推荐命中板块</h4>
                        <div class="overflow-x-auto">
                            <table id="yesterday-hit-plates" class="min-w-full divide-y divide-gray-200 table-2-cols">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">序号</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">板块名称</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">昨日综合得分</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">是否命中</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">昨日涨幅</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">龙头股份</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">今日板块排名</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">昨日板块排名</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div>
                        <h4 class="text-sm font-medium text-gray-600 mb-2">今日TOP20个涨幅的板块</h4>
                        <div class="overflow-x-auto">
                            <table id="today-top-gain-plates" class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">序号</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">板块名称</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">涨幅</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">龙头股份</th>
                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">昨日预测命中</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer class="mt-8 text-center text-sm text-gray-500">

    </footer>
</body>
</html>